<!--
 * @Author: coocase
 * @Date: 2021-04-07 14:54:27
 * @LastEditTime: 2021-06-09 14:17:25
 * @LastEditors: coocase
 * @Description: 支付页
 * @FilePath: \git\dami\src\pages\pay\pay.vue
-->
<template>
    <div class="wrap">
        <header class="header">
            <Row>
                <Col span="14">
                    <div class="title">
                        【{{buydatas.adress}}】《{{buydatas.itemName}}》
                    </div>
                </Col>
                <Col span="10">
                    <div class="date">
                        <DatePicker
                            type="date"
                            :options="options"
                            placeholder="Select date"
                            style="width: 200px"
                        ></DatePicker>
                        <Dropdown style="margin-left: 20px">
                            <Button type="default" v-if="buydatas.startTime">
                                {{getDate}}
                                <Icon type="ios-arrow-down"></Icon>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem v-for="item in buydatas.startTime" :key="item.id" v-if="buydatas.startTime.length"
                                    @click.native = 'dateClick' name = item.id>{{item.time}}</DropdownItem
                                >
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                </Col>
            </Row>
        </header>

        <Layout>
            <Header class="title-price-list">
                <Row>
                    <Col span="12" class="list">
                        <span class="list-title">筛选票品：</span>
                        <Button class="title-price-box" type="text"  v-for="(item,index) in getprice" :key="index" v-if="getprice.length">
                            <svg
                                class="icon"
                                aria-hidden="true"
                                :style="{color:seatColor(index+2) }"
                            >
                                <use xlink:href="#icon-loveseat"></use>
                            </svg>
                            <span class="price">{{item}}元</span>
                        </Button>

                        
                    </Col>
                    <Col span="12">
                        <div class="tips">
                            <div class="tip">
                                <svg
                                    class="icon"
                                    aria-hidden="true"
                                    style="color: #666666"
                                >
                                    <use xlink:href="#icon-loveseat"></use>
                                </svg>
                                <span class="tips-text"> 不可选</span>
                            </div>

                            <div class="tip">
                                <svg
                                    class="icon"
                                    aria-hidden="true"
                                    style="color: #4289c4"
                                >
                                    <use xlink:href="#icon-zuowei"></use>
                                </svg>
                                <span class="tips-text"> 选中</span>
                            </div>
                        </div>
                    </Col>
                </Row>
            </Header>
            <Layout class="select-seat">
                <Content>
                    <!-- <seat @getSeat="getSeat"></seat> -->
                    <div class="seat-box">
                        <div
                            class="row"
                            v-for="(row, index) in seats.state"
                            :key="'row' + index"
                            v-if="seats.state.length"
                        >
                            <!-- <span class="row-id">{{index}}</span> -->
                            <div class="column">
                                <span
                                    class="price-box"
                                    v-for="(column, index1) in row"
                                    :key="'col' + index1"
                                    
                                >
                                    <svg
                                        :class="
                                            iconStyle(column, index, index1)
                                        "
                                        aria-hidden="true"
                                    >
                                        <!-- :style="{ color: seatColor(column) }" -->
                                        <use
                                            class="seat"
                                            xlink:href="#icon-loveseat"
                                            @click="
                                                column == 1 || column == 3
                                                    ? addOrDel(index, index1)
                                                    : ''
                                            "
                                        ></use>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </Content>
                <Sider hide-trigger width="300" class="sider">
                    <div class="select-result">
                        <div class="result-header">
                            <span class="header-title"> 已选票品</span>
                            <a class="clear-btn" @click="clearSelect()">清空</a>
                        </div>
                        <div class="result-contain">
                            
                            <div
                                class="selected-title"
                                v-for="(level, index) in levelFilters"
                                :key="'level' + index"
                                v-if="levelFilters.length"
                            >
                                {{ price(level) }}元

                                <div
                                    class="selected"
                                    v-for="(levelSeat, index) in levelCount(
                                        level
                                    )"
                                    :key="'levelSeat' + index"
                                >
                                    <svg
                                        class="icon"
                                        aria-hidden="true"
                                        :style="{
                                            color: seatColor(levelSeat[2]),
                                        }"
                                    >
                                        <use xlink:href="#icon-zuowei"></use>
                                    </svg>
                                    <span
                                        >{{ levelSeat[0] + 1 }}排{{
                                            levelSeat[1]
                                        }}号</span
                                    >
                                    <svg
                                        class="icon close"
                                        aria-hidden="true"
                                        style="color: #666; float: right"
                                        @click="
                                            deleSelect(
                                                index,
                                                levelSeat[0],
                                                levelSeat[1]
                                            )
                                        "
                                    >
                                        <use
                                            xlink:href="#icon-searchclose"
                                        ></use>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="total-price">
                            <span class="total-price-tip">合计</span>
                            <span class="total-price-money"
                                >￥{{ totalPrice() }}</span
                            >/
                            <span class="total-price-tip2"
                                >共{{ this.selected.length }}张</span
                            >

                            <Button @click="modal = true" type="text"
                                >价格明细
                                <Icon type="ios-arrow-up" />
                            </Button>
                            <Modal v-model="modal" width="400">
                                <p slot="header" class="model-header">
                                    <span class="model-title">价格明细</span>
                                    <span class="model-tip"
                                        >实际优惠以订单确认页为准</span
                                    >
                                </p>
                                <div class="model-content">
                                    <div class="price-list-title">商品信息</div>

                                    <div
                                        class="price-list"
                                        v-for="list in levelFilters"
                                        :key="list"
                                        v-if="levelFilters.length"
                                    >
                                        <span class="price-list-price"
                                            >{{ price(list) }}元 &times
                                            {{ levelCount(list).length }}</span
                                        >
                                        <span class="price-list-total"
                                            >￥{{
                                                price(list) *
                                                levelCount(list).length
                                            }}.00</span
                                        >
                                    </div>
                                </div>
                                <div slot="footer" class="model-footer">
                                    <span class="price-list-footer-tip"
                                        >合计</span
                                    >
                                    <span class="price-list-footer-total"
                                        >￥{{ totalPrice() }}</span
                                    >
                                </div>
                            </Modal>
                        </div>
                        <Button class="confirm" :to="{ name: 'Confirm' }"
                            >确认选座</Button
                        >
                    </div>
                </Sider>
            </Layout>
        </Layout>
    </div>
</template>

<script>
import bus from "../../common/eventBus";
export default {
    name: "pay",
    components: {},
    data() {
        return {
            //iview date api
            modal: false,
            options: {
                disabledDate(date) {
                    return date && date.valueOf() < Date.now() - 86400000;
                },
            },
            buydatas: '',
            selected: [], //选择的作为
            seats: [], //座位布局信息
            levelFilters: [], //有哪些等级的座位
            selectedCount: 0,
            dateSelect:''
        };
    },
    computed:{
        getprice(){
            var arr =[];
            if(this.buydatas.itemPrice){//不做判断的话，数据不存在时则会报错 foreach 未定义
                this.buydatas.itemPrice.forEach(el => {
                    arr.push(el.price)
                });
            }
            for (let i = 0; i < arr.length-1; i++) {
                for (let j = 0; j < arr.length-1-i; j++) {
                    if(arr[j]>arr[j+1]){
                        let el = arr[j+1];
                        arr[j+1] = arr[j];
                        arr[j] = el;
                    }
                }
            }
            return arr
        },
        getDate:function () {  
            if(this.dateSelect){
                return this.dateSelect
            }else if(this.buydatas.startTime){
                return this.buydatas.startTime[0].time
            }else return 'xxxx-xx-xx xx:xx:xx'
            // return this.dateSelect?this.dateSelect:this.buydatas.startTime[0].time?this.buydatas.startTime[0].time:'2007-05-15 03:45:09'
        }
    },
    methods: {
        dateClick:function(e){
            console.log(e.target.innerHTML);
            this.dateSelect =  e.target.innerHTML
        },
        addOrDel: function (r, c) {
            //判断当前状态码，进行切换状态及样式
            var level = this.seats.level[r][c];
            this.iconChange(r, c);
            // if (e.currentTarget.getAttribute("xlink:href") == "#icon-loveseat")
            if (this.seats.state[r][c] == 1) {
                //   this.$set(this.selected,this.selectedCount, [r, c, level])
                //满足条件添加数据
                this.selected.push([r, c, level]);
                //设置状态
                this.seats.state[r][c] = 3;
                //判断是否保存过此等级 没保存则添加
                if (this.levelFilters.indexOf(level) == -1) {
                    this.levelFilters.push(level);
                }
                //选座计数
                this.selectedCount++;
            } else {
                for (let i = 0; i < this.selected.length; i++) {
                    const el = this.selected[i];
                    //循环判断获取要删除的下标 i 通过i删除数据
                    if (el[0] == r && el[1] == c) {
                        this.selected.splice(i, 1);
                        //判断此等级的数据是否还有，没有则清除此等级标志
                        if (this.levelCount(level).length == 0) {
                            console.log("clear");
                            this.levelFilters.splice(
                                this.levelFilters.indexOf(level),
                                1
                            );
                        }
                        //改变状态码
                        this.seats.state[r][c] = 1;
                        //计数
                        this.selectedCount--;
                    }
                }
            }
        },
        clearSelect() {
            //清除全部选择的座位
            this.selected.splice(0, this.selected.length);
        },
        deleSelect(index, r, c) {
            this.addOrDel(r, c);
        },
        // 座位等级
        iconChange(r, c) {
            // 修改图标
            var el = document.getElementsByClassName("icon" + r + c);
            if (this.seats.state[r][c] == 1) {
                el[0].childNodes[0].setAttribute("xlink:href", "#icon-zuowei");
            } else {
                el[0].childNodes[0].setAttribute(
                    "xlink:href",
                    "#icon-loveseat"
                );
            }
        },
        // 根据价位过滤数据
        levelCount(level) {
            return this.selected.filter((item) => {
                return item[2] == level;
            });
        },

        //根据等级返回价格
        price: function (level) {
            var price = 0;
            switch (level) {
                case 3:
                    price = this.getprice[3];
                    break;
                case 4:
                    price = this.getprice[2];
                    break;
                case 5:
                    price = this.getprice[1];
                    break;
                default:
                    price = this.getprice[0];
                    break;
            }
            return price;
        },
        totalPrice() {
            var total = 0;
            for (let i = 0; i < this.levelFilters.length; i++) {
                var level = this.levelFilters[i];
                var count = this.levelCount(level).length;
                var price = this.price(level);
                total = total + price * count;
            }
            return total;
        },
        iconStyle(column, index, index1) {
            //根据状态来修改样式
            var str = " icon" + index + index1;
            var classnname = "";
            if (column == 1) {
                switch (this.seats.level[index][index1]) {
                    case 3:
                        str += " level3";
                        break;
                    case 4:
                        str += " level4";
                        break;
                    case 5:
                        str += " level5";
                        break;
                    default:
                        break;
                }
                classnname = "icon icon-zuowei" + str;
            } else if (column == 0) {
                classnname = "icon cant " + str;
            } else if (column == 2) {
                classnname = "icon none " + str;
            } else if (column == 3) {
                classnname = "icon icon-selected" + str;
            }
            return classnname;
        },
        //根据等级设置颜色
        seatColor(level) {
            var color = "";
            switch (level) {
                case 3:
                    color = "#ff6390";
                    break;
                case 4:
                    color = "#ff4040";
                    break;
                case 5:
                    color = "#47b1f1";
                    break;
                default:
                    color = "#b36b0d";
                    break;
            }
            return color;
        },
        getSeats() {
            //获取座位数据
            this.$http
                .getRequest({
                    api: "seats",
                    data: {},
                })
                .then((res) => {
                    this.seats = res;
                })
                .catch((err) => {});
        },
        getDetail:function () {  
        this.$http.getRequest({
          api:'detail',
          data:{}
        }).then((res) => {
          this.buydatas = res
        }).catch((err) => {
          console.log(err);
        });
      },
    },
    created: function () {
        bus.$off("buydatas").$on("buydatas",  (paydatas) =>{ 
              this.buydatas = paydatas
        });
    },
    beforeDestroy(){
        bus.$emit('paydatas',this.buydatas,this.selected)
    },
    mounted: function () {
        this.getSeats();
        if(!this.buydatas.itemName){
            this.getDetail()
        }
    },
    beforeUpdate() {},
};
</script>

<style scoped>
ul,
li {
    list-style: none;
}
.wrap {
    height: 100%;
    max-height: 890px;
}
.ivu-layout {
    height: 100%;
    max-height: 835px;
}
.ivu-layout-sider,
.ivu-layout-content {
    background-color: #fdfdfd;
}
.ivu-layout-header {
    background-color: #f8f8f8;
    height: 30px;
    line-height: 14px;
    margin: 10px;
}
.red {
    color: red;
}
.green {
    color: green;
}
.wrap {
    width: 100%;
    margin: 0 auto;
}
.header {
    margin: 20px 0px;
}
.title {
    float: left;
    margin-left: 20px;
    font-size: 22px;
    font: bolder;
    color: black;
}
.date {
    float: right;
    margin-right: 20px;
}
.list {
    margin: 0 auto;
}
.list-title {
    color: black;
}
.icon-loveseat {
    color: black;
}
.title-price-list,
.title-price-box {
    background-color: rgb(221, 221, 221);
    height: 32px;
    margin: 10px 0;
}
.title-price-box {
    display: inline-block;
    font-size: 12px;
    margin: 0 6px;
    line-height: 14px;
    padding: 8px;
}
.tips {
    float: right;
}
.tip {
    display: inline-block;
    line-height: 32px;
    margin: 0 5px;
}

.select-seat {
    height: 100%;
    max-height: 755px;
}
.sider {
    box-shadow: -2px 0 16px 0 hsl(0deg 0% 86% / 50%);
}
.select-result {
    display: flex;
    flex-direction: column;
    padding: 8px;
    height: 100%;
}
.result-header {
    display: flex;
    justify-content: space-between;
}
.header-title {
    padding: 10px;
}
.result-contain {
    flex: 1;
}
.selected {
    margin: 10px 0;
    padding: 0 10px;
}
.selected span {
    cursor: pointer;
}
.selected:hover {
    background-color: rgb(226, 226, 226);
}

.icon.close {
    display: none;
    cursor: pointer;
}
.icon-zuowei {
    color: #f15d43;
}
.cant {
    color: #666;
}
.none {
    opacity: 0;
}
.icon-selected {
    color: #ff1268;
}
.selected:hover .icon.close {
    display: inline-block;
    cursor: pointer;
    margin-top: 3px;
}
.confirm {
    margin: 10px;
    height: 40px;
    background-color: #ff1268;
    border: none;
    color: white;
    padding: 0 15px;
    cursor: pointer;
}
.seat-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.row {
    padding: 2px;
}
.column {
    padding: 2px;
}
.price-box {
    padding: 8px;
    font-size: 20px;
}
.icon-zuowei:hover,
.icon-selected:hover {
    cursor: pointer;
    position: relative;
    font-size: 25px;
    transition: 0.1s;
}

.level-default {
    color: #b36b0d;
}
.level3 {
    color: #ff6390;
}
.level4 {
    color: #ff4040;
}
.level5 {
    color: #47b1f1;
}
.total-price {
    margin-left: 10px;
    font-weight: bold;
}
.total-price-money {
    margin-left: 10px;
    color: #ff1268;
    font-size: 18px;
}
.total-price-tip2 {
    font-size: 12px;
}
.model-header {
    margin: 20px;
}
.model-title {
    font-size: 20px;
}
.model-tip {
    font-size: 12px;
    color: #666;
    margin-left: 20px;
}
.model-content {
    margin-left: 20px;
}
.price-list-title {
    font-size: 14px;
    font-weight: bolder;
}

.price-list {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.model-footer {
    margin-left: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price-list-footer-tip {
    font-size: 16px;
    font-weight: bold;
}
.price-list-footer-total {
    font-size: 25px;
    color: #ff1268;
}
</style>
